<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>分店管理-首页</title>
	<link rel="stylesheet" href="/js/plugin/layui-v2.3.0/layui/css/layui.css">
	<link rel="stylesheet" href="/css/reset.css">
	<link rel="stylesheet" href="/css/index.css">
	<link rel="stylesheet" href="/css/index_team.css">
	<script src="/js/jquery-2.1.1.min.js"></script>
	<script src="/js/plugin/layui/layui.js"></script>
</head>
<style>
::-webkit-scrollbar-thumb {
  background:#a2a2a2; 
  border-radius: 10px;
  height:50%;
}
::-webkit-scrollbar{width:6px;}
	body{
		overflow-y: scroll;
	} 
	.border-show_status_active {
	    background-color: #62a8e9;
	    border-color: #62a8e9;
	    color:#fff;
	}
</style>
<body>
	<div class="kb-content my-locations-list">	
		<section class="kb-content-container clearfix">
				<header class="nav-section-header clearfix">
					<div class="nav-section-header-title  f-left"><span>入驻团队</span></div>	
					<div class="f-right">
						<button class="layui-btn layui-btn-radius layui-btn-normal">导出团队信息</button>
						<button class="layui-btn layui-btn-radius layui-btn-normal" id="add_team">
							<i class="layui-icon">&#xe654;</i>添加新公司
						</button>
					</div>
				</header>
				<div class="nav-section-content-container">
					<div class="layui-tab layui-tab-brief my-tab" lay-filter="docNavTabBrief">
						  <ul class="layui-tab-title">
						    <li class="layui-this">全部企业</li>
						    <li value="1">已入驻企业</li>
						    <li value="2">未入驻企业</li>
						    <li value="3">毕业企业</li>
						    <ul class="type-btn">
						  		 <li class="team-tile layui-this" value="4"><i class="layui-icon" style="font-size:20px">&#xe653;</i>Logo墙显示</li>
						   		 <li class="team-list" value="5"><i class="layui-icon" style="font-size:20px">&#xe60a;</i>列表显示</li> 
						    </ul>
						  </ul>
						  <div id="dateShai" style="display:none;">
						  		<div class="nav-section-action-bar" style="display: inline-flex;margin-top: 0px;">	
						  			<div class="layui-input-inline" style="width:200px">
										<input class="layui-input" id="test6" placeholder="选择合同到期日范围" type="text">
								    </div>
									<div class="border-show_status">
										<span class="color-show" style="background-color: rgb(184, 94, 99);"></span>
										<span class="status-text">一周内</span>
									</div> 	
									<div class="border-show_status">
										<span class="color-show" style="background-color: rgb(246, 166, 35);"></span>
										<span class="status-text">一月内</span>
									</div> 	
									<div class="border-show_status">
										<span class="color-show" style="background-color: rgb(102, 102, 102);"></span>
										<span class="status-text">两月内</span>
									</div> 	
									
						  		</div>
						  		<button class="layui-btn layui-btn-radius layui-btn-danger f-right clear-criteria hide" style="width: 150px;"><i class="layui-icon">ဆ</i>清空日期条件</button>
						  </div>
						  <div class="layui-tab-content " id="teamList" style="display:none;">
						  	  <table class="layui-hide" id="LAY_table_team" lay-filter="team"></table> 
						  	  <script id="dicIndustry" type="text/html">
							  	{{# if(d.dicIndustry!=null){ }}
								{{d.dicIndustry.dicName}}
								{{#  }else{     }}
									无  
								{{#  }     }}
							  </script>
							  <script id="dicStage" type="text/html">
							  	{{# if(d.dicStage!=null){ }}
								<span data-id="{{d.id}}">{{d.dicStage.dicName}}</span>
								{{#  }else{     }}
									<span data-id="{{d.id}}">无 </span>
								{{#  }     }}
							  </script>
						  </div>
						  
						  <div class="layui-tab-content " id="teamLogo" >
						  		<div style='width: 100%; height: 100%; position: relative;'>
						  			<div class="search-topic">
						  				<span style="width: auto;">全部</span>
						  				<span class="" id="a">A</span>
						  				<span class="" id="b">B</span>
						  				<span class="" id="c">C</span>
						  				<span class="" id="d">D</span>
						  				<span class="" id="e">E</span><span class="" id="f">F</span><span class="" id="g">G</span>
						  				<span class="" id="h">H</span><span class="" id="i">I</span><span class="" id="j">J</span>
						  				<span class="" id="k">K</span><span class="" id="l">L</span><span class="" id="m">M</span>
						  				<span class="" id="n">N</span><span class="" id="o">O</span><span class="" id="p">P</span>
						  				<span class="" id="q">Q</span><span class="" id="r">R</span><span class="" id="s">S</span>
						  				<span class="" id="t">T</span><span class="" id="u">U</span><span class="" id="v">V</span>
						  				<span class="" id="w">W</span><span class="" id="x">X</span><span class="" id="y">Y</span><span class="" id="z">Z</span>
						  			</div>
						  			<div class="clearfix">
						  				<div class="company-logo-all t-center clearfix" id="teamLogoList">
						  					
						  				</div>
						  			</div>
						  		</div>
						  </div>
					</div>      
				</div>
		</section>
	</div>
	<input type="hidden" id="projectId" name="projectId" th:value="${projectId}" />
</body>
<script>
var projectId = $("#projectId").val();
var table;
var admission; //已入驻企业
var notAdmission; //未入驻企业
var graduation; //毕业企业
var pinyin; //拼音
var startdate = null;
var enddate = null;
$(function(){
	obtainTeamList();
	layui.use(['element','table','layer','laydate'], function(){
	  var element = layui.element;
	  table = layui.table;
	  var laydate = layui.laydate;
	//日期范围选择
	  laydate.render({ 
	    elem: '#test6'
	    ,range: '~' //range: true或 range: '~' 来自定义分割字符
    	,done: function(value, date, endDate){
    		if(value == ""){
    			startdate = null;
    			enddate = null;
    			if($(".border-show_status_active").length == 0){
    				$("#dateShai button").addClass("hide");
    			}
    		}else{
    			startdate = value.split("~")[0];
    			enddate = value.split("~")[1];
    			$("#dateShai button").removeClass("hide");
    		}
    		reloadTable();
    	  }
	  });
	  element.on('tab(docNavTabBrief)', function(){
		  var target=$(this),index=$(this).index();
		  
	  });
	//方法级渲染
		table.render({
			id:'team',
		    elem: '#LAY_table_team',
		    url: '/app/customerTeam/listdata',
		    cols: [[
		      {field:'simpleName', align:'left', title: '团队名称',width:'20%'}
		      ,{field:'dicIndustry',toolbar:'#dicIndustry' , align:'left', title: '阶段',width:'15%'}
		      ,{field:'dicStage',toolbar:'#dicStage' , align:'left', title: '行业',width:'15%'}
		      ,{field:'Name', align:'center', title: '团队总人数',width:'15%'}
		      ,{field:'post', align:'center', title: '租用工位数',width:'15%'}
		      ,{field:'enabledState', align:'center', title:'已入驻人数',width:'15%' }
		    ]]
		    ,page: true
		    ,where: {
	        	params:{projectId:projectId,admission: admission,notAdmission:notAdmission,graduation:graduation}
	        }
		});
		obtainTeamList();
		//日期范围点击事件
		$(".border-show_status").on("click",function(){
			$(this).addClass("border-show_status_active").siblings().removeClass("border-show_status_active");
			var index = $(this).index();
			renderDate(index);
			startdate = $("#test6").val().split("~")[0];
			enddate = $("#test6").val().split("~")[1];
			$("#dateShai button").removeClass("hide");
			var pinyin = null;
			if($(".topic-click").attr("id")){
				pinyin = $(".topic-click").attr("id");
			}
			reloadTable(pinyin);
		})
		//清除所有筛选范围
		$("#dateShai button").on("click",function(){
			removeAllKey();
			var pinyin = null;
			if($(".topic-click").attr("id")){
				pinyin = $(".topic-click").attr("id");
			}
			reloadTable(pinyin);
		})
		//清除所有筛选范围
		function removeAllKey(){
			$("#dateShai button").addClass("hide");
			$(".border-show_status").removeClass("border-show_status_active");
			$("#test6").val("");
			startdate = null;
			enddate = null;
			
		}
		//更改时间后重载列表
		function reloadTable(pinyin){
			table.reload('team', {
		        page: {
			          curr: 1 //重新从第 1 页开始
			        }
			        ,where: {
			        	params:{startdate:startdate,enddate:enddate,pinyin:pinyin}
			        }
		    });
			obtainTeamList(pinyin);
		}
		//自定义时间
		  function renderDate(type){
			  var value='';
			  var myDate = new Date();
				//获取当前年
				var y=myDate.getFullYear();
				//获取当前月
				var m=myDate.getMonth()+1;
				//获取当前日
				var d=myDate.getDate();
				  if(type==1){
					  d+=7;
				  }else if(type==2){
					 m+=1;
				  }else if(type==3){
					 m+=2;
				  }
				  d-=1;			
			  var now= new Date(y,m,d),endY=now.getFullYear(),endM=now.getMonth(),endD=now.getDate();
			  value=myDate.getFullYear()+"-"+p(myDate.getMonth()+1)+"-"+p(myDate.getDate())+" ~ "+endY+"-"+p(endM)+"-"+p(endD);
			  laydate.render({
				  elem: '#test6'
				  ,value: value
			  });
		  }
		  function p(s) {
			    return s < 10 ? '0' + s: s;
			}
	});
	 
	
	$(".search-topic span").on("click",function(){
		$(this).addClass("topic-click").siblings("span").removeClass("topic-click");
		var pinyin;
		if(this.id!=""){
			pinyin=this.id
		}else{
			$(this).removeClass("topic-click");
		}
		
		table.reload('team', {
	        page: {
		          curr: 1 //重新从第 1 页开始
		        }
		        ,where: {
		        	params:{pinyin:pinyin}
		        }
	    });
		obtainTeamList(pinyin);
	})
	//企业类型点击事件
	$(".layui-tab-title li").on("click",function(){
		$(".search-topic span").removeClass("topic-click");
		var type = $(this).attr("value");
		var admission1="";
		var notAdmission1="";
		var graduation1="";
		//console.log(type);
		if(type==1){
			$("#dateShai").show();
		}else{
			$("#dateShai").hide();
			removeAllKey();
		}
		if(type==1){
			admission1="1";
			admission="1";
			notAdmission=undefined;
			graduation=undefined;
		}else if(type==2){
			notAdmission1="1";
			admission=undefined;
			notAdmission="1";
			graduation=undefined;
		}else if(type==3){
			admission=undefined;
			notAdmission=undefined;
			graduation="1";
			graduation1="1";
		}else if(type==null){
			admission=undefined;
			notAdmission=undefined;
			graduation=undefined;
		}
		table.reload('team', {
	        page: {
		          curr: 1 //重新从第 1 页开始
		        }
		        ,where: {
		        	params:{admission:admission1,notAdmission:notAdmission1, graduation:graduation1}
		        }
	    });
		obtainTeamList();
	})
	
	$(".type-btn li").on("click",function(){
		var type = $(this).attr("value");
		if(type==4){
			$("#teamLogo").show();
			$("#teamList").hide();
		}else{
			$("#teamList").show();
			$("#teamLogo").hide();
			tableBtnOpt();
		}
	})
	
	$('#add_team').on("click",function(){
		parent.parent.layer.open({
			  type: 2, 
			  title:"添加新公司",
			  area: ['700px','90%'],
		      shade: [0.6, '#000'],
		      zIndex:800,
			  content:"/app/customerTeam/add/"+projectId , 
			  end: function () {
				  table.reload('team');
				  tableBtnOpt();
				  obtainTeamList();
		      }
			});
	})
	
})
function tiaozhuan(id){
	var iframeSrc='/app/customerTeam/details/'+id;
	var iframe = document.createElement('iframe');//动态创建iframe，禁止iframe的src回退；
    iframe.src = iframeSrc;
    iframe.width = '100%';
    iframe.height = '100%';
    iframe.id = 'project-iframe';
    parent.$(".iframe-wrap").html($(iframe));
}
function obtainTeamList(pinyin){
	var url="/app/customerTeam/listdata";
	jQuery.ajax({
        type:"post",
        async:false,
        url:url,
        dataType:"json",
        data:{'params[projectId]':projectId,'params[admission]':admission,'params[notAdmission]':notAdmission,'params[graduation]':graduation,'params[pinyin]':pinyin,'params[startdate]':startdate,'params[enddate]':enddate},
        success:function(data){
        	resolve(data.data);
        }
    })
}
function resolve(data){
	var cont="";
	for (var i = 0; i < data.length; i++) {
		var img="/images/icon/icon_not_come@3x.png";
		var dicIndustry="暂无行业信息", stateTip="未入住";
		if(data[i].deliverDetails&&data[i].cardKnowledge&&data[i].cardAuthorization){
			img="/images/icon/icon_enter@3x.png";
			stateTip="已入住";
		}
		if(data[i].dicIndustry!=null){
			dicIndustry=data[i].dicIndustry.dicName;
		}
		//console.log(data[i],'00000')
		cont+='<a href="" class="company-message" onclick=tiaozhuan("'+data[i].id+'") onmouseenter=tipHover(this,"'+data[i].fullName+'") onmouseleave=closeAll()><img src="'+img+'" alt="" class="tag-img"  onmouseenter=tipHover(this,"'+stateTip+'") onmouseleave=closetip()>'
		+'<div class="company-logo-position  f-left"><div class="company-logo f-left"><img src="/images/company_default.png" alt="" ></div>'
		+'<div class="org_info f-left"><div class="org_name">'+data[i].simpleName+'</div><div class="industry_name">'+dicIndustry+'</div>'
		+'<div class="desk_info"><span style="margin-right: 5px;">0工位</span><span style="color: rgb(221, 90, 85);"></span>'
		+'</div></div></div></a>';
	}
	
	$("#teamLogoList").html(cont);
	//tipHover($("#teamLogoList"))
}
function tableBtnOpt(){
	var $mylist = $("#LAY_table_team").next('.layui-table-view').find('.layui-table-body table.layui-table');
	/*  点击tr元素,跳转详情基于table*/
	  $mylist.on("click",'tr',function(){
			var targetI=$(this);
			var id=$(targetI).children('td').find("span[data-id]").attr("data-id");
			tiaozhuan(id);
			return false;
	  }); 
}

function tipHover(target,txt){
		var index=layer.tips(txt,target, {
			  tips: [1, '#000'],
			  area: ['auto', 'auto'],
			  time: 0,
			  tipsMore: true
		});
		return index;
}
function closeAll(){
	layer.closeAll();
}
function closetip(){
	layer.close(layer.index);
}

</script>
</html>